﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<jsp:include page="../common/resource-head.jsp"/>
<body>
<jsp:include page="../common/common-top.jsp"/>
<div class="main-body">

  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-primary">
        <div class="panel-heading text-center">各类书籍库存</div>
        <div class="panel-body">
          <div id="main" style="height: 500px"></div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-warning">
        <div class="panel-heading text-center">上午销量前三占比</div>
        <div class="panel-body">
          <div id="main2" style="height: 500px"></div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-success">
        <div class="panel-heading text-center">下午销量前三占比</div>
        <div class="panel-body">
          <div id="main3" style="height: 500px"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<jsp:include page="../common/resource-script.jsp"/>

<script>
  echarts.init(document.getElementById("main")).setOption({
    xAxis: {
      type: 'category',
      data: [
        <c:forEach items="${goodsData}" var="item" varStatus="vs">
        '${item.name}'<c:if test="${!vs.last}">, </c:if>
        </c:forEach>
      ]
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [
          <c:forEach items="${goodsData}" var="item" varStatus="vs">
          ${item.count}<c:if test="${!vs.last}">, </c:if>
          </c:forEach>
        ],
        type: 'bar'
      }
    ]
  });

  echarts.init(document.getElementById("main2")).setOption({
    title: {
      text: '上午销量前三占比',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          <c:forEach items="${amData}" var="item" varStatus="vs">
          {value:${item.count}, name:'${item.name}'}<c:if test="${!vs.last}">, </c:if>
          </c:forEach>
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });

  echarts.init(document.getElementById("main3")).setOption({
    title: {
      text: '下午销量前三占比',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          <c:forEach items="${pmData}" var="item" varStatus="vs">
          {value:${item.count}, name:'${item.name}'}<c:if test="${!vs.last}">, </c:if>
          </c:forEach>
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
</script>

</html>

